<!-- 商品详情 -->
<template>
  <div class="detail" v-if="goodsDetail.info">
    <div class="info">
      <div class="name">{{ goodsDetail.info.name }}</div>
      <div class="brief">{{ goodsDetail.info.goods_brief }}</div>
      <div class="price">￥{{ goodsDetail.info.retail_price }}</div>
    </div>
    <div class="info-desc" v-html="goodsDetail.info.goods_desc"></div>
    <ul class="goods-list-container">
      <li
        class="item"
        v-for="item in goodsDetail.productList"
        :key="item.id"
        @click="goGoodsDetail(item.id)"
      >
        <img class="img" :src="item.list_pic_url" alt="" />
        <div class="goods-name">{{ item.name }}</div>
        <div class="goods-price">{{ item.retail_price }}</div>
      </li>
    </ul>

    <!-- footer -->
    <div class="footer">
      <div class="item">
        <van-icon
          name="star-o"
          size="20"
          @click="addGoodsCollected"
          :color="goodsDetail.collected ? 'red' : ''"
        />
      </div>
      <div class="item">
        <van-icon
          name="cart-o"
          size="20"
          :badge="goodsDetail.allnumber"
          @click="goCartPage"
        />
      </div>

      <div class="item" @click="showPopupAndSubmit('buy')">立即购买</div>
      <div class="item" @click="showPopupAndSubmit('cart')">加入购物车</div>
    </div>

    <!-- 弹出层 -->
    <van-popup
      v-model="isShowPopup"
      closeable
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div>
        <van-stepper v-model="goodsNum" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { detailaction as detailactionApi } from '@/api/home'
import {
  addcollect as addcollectApi,
  addCart as addCartApi,
  submitAction as submitActionApi
} from '@/api/goodsDetail'
export default {
  name: 'GoodsDetail',
  data() {
    return {
      goodsNum: 1,
      isShowPopup: false,
      goodsId: '',
      goodsDetail: {}
    }
  },

  components: {},

  computed: {},

  watch: {
    // $route(to, from) {
    //   // 对路由变化作出响应...
    //   // console.log(to,from);
    //   this.goodsId = to.params.id
    //   this.getGoodsDetail()
    // }
  },
  /*  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
    this.goodsId = to.params.id
    this.getGoodsDetail()
    next()
  }, */

  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log(to);
    // 获取页面滚动位置
    // localStorage.setItem('scrollTop',document.documentElement.scrollTop)
    // console.log(document.documentElement.scrollTop);
    // 把滚动的位置 添加到 要去的那个路由上
    from.meta.y = document.documentElement.scrollTop
    from.meta.goodsId = this.goodsId
    next()
  },

  created() {
    // console.log(this.$route.query.id);
    // this.goodsId = this.$route.query.id
   
    this.goodsId = this.$route.params.id
    this.getGoodsDetail()
  },

  mounted() {
    
  },

  methods: {
    async getGoodsDetail() {
      let res = await detailactionApi({
        id: this.goodsId,
        openId: localStorage.getItem('openId')
      })
      this.goodsDetail = res
      console.log(localStorage.getItem('scrollTop'));
    },
    async addGoodsCollected() {
      let res = await addcollectApi({
        goodsId: this.goodsId,
        openId: localStorage.getItem('openId')
      })
      if (res.data == 'success') {
        // 收藏状态修改成功
        // 刷新数据
        this.getGoodsDetail()
      }
    },

    goCartPage() {
      this.$router.push({ name: 'cart' })
    },
    async showPopupAndSubmit(flag) {
      // 判断弹出层是否 显示
      if (this.isShowPopup) {
        if (flag === 'cart') {
          // 点击 加入购物车
          let res = await addCartApi({
            goodsId: this.goodsId,
            number: this.goodsNum,
            openId: localStorage.getItem('openId')
          })
          if (res.data === 'success') {
            // 添加购物车成功
            // 刷新数据
            this.getGoodsDetail()
          }
        } else {
          // 点击 立即购买
          let res2 = await submitActionApi({
            allPrise: this.goodsNum * this.goodsDetail.info.retail_price,
            goodsId: this.goodsId,
            openId: localStorage.getItem('openId')
          })
          // console.log(res2.data,typeof res2.data);
          if (res2.data) {
            // 下单成功，
            // 跳转订单确认页面
            // console.log('执行了吗？');
            this.$router.push({ name: 'Order' })
          }
        }
      } else {
        this.isShowPopup = true
      }
    },
    goGoodsDetail(id) {
      // this.$router.push({name:'GoodsDetail',query:{id}})
      this.$router.push({ name: 'GoodsDetail', params: { id } })
    }
  }
}
</script>
<style lang='scss' scoped>
.detail {
  .info-desc {
    ::v-deep img {
      width: 100%;
    }
  }
  .goods-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      width: 49%;
      background-color: #fff;
      .img {
        width: 150px;
        height: 150px;
      }
      .goods-name {
      }
      .goods-price {
        color: red;
        font-size: 16px;
      }
    }
  }

  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    height: 50px;
    .item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      border-right: 1px solid red;
      &:last-child {
        border: none;
        background-color: #b4282d;
        color: #fff;
      }
    }
    /*  .van-info {
      top: 17px;
      right: 37px;
    } */
  }
}
</style>